<script lang="tsx">
export default {
  setup() {
    const selectedKeys = ref<any[]>([]);
    const openKeys = ref<any[]>([]);
    const router = useRouter();
    const flatArray = (
      array: any[] = [],
      parentItem: any = undefined,
      childKey = "children",
      id = "id"
    ) => {
      const result: any[] = [];
      array.forEach((item) => {
        if (item === undefined) return;
        if (typeof item == "object" && item[childKey]) {
          result.push(item);
          result.push(...flatArray(item[childKey], item, childKey, id));
        } else {
          if (parentItem) {
            item._parentKeys = [
              ...(parentItem._parentKeys || []),
              parentItem[id],
            ];
          }
          result.push(item);
        }
      });
      return result;
    };
    const menuInitData = computed(() => {
      return [
        {
          path: "/",
          meta: {
            icon: "ant-design:merge-cells-outlined",
            title: "首页",
          },
          id: "1792786719549542402",
        },
        {
          children: [
            {
              path: "/qkpage/home",
              meta: {
                icon: "ant-design:line-chart-outlined",
                title: "Home页",
              },
              id: "1771084953438171138",
            },
            {
              path: "/qkpage/about",
              meta: {
                icon: "ant-design:printer-outlined",
                title: "About页",
              },
              id: "1771085186964434946",
            },
          ],
          meta: {
            icon: "ant-design:coffee-outlined",
            title: "Vue3子应用",
          },
          id: "1771084840082911233",
        },
      ];
    });
    const flatMenuData = computed(() => {
      const array = flatArray(menuInitData.value);
      // 处理自动autolist页面和设计器页面加前缀
      // array.forEach((menuItem: any) => {
      //   if (
      //     menuItem.path.startsWith("/autolist/") ||
      //     ["/process/form"].includes(menuItem.path)
      //   ) {
      //     menuItem.path = "/qkpage" + menuItem.path;
      //   }
      // });
      return array;
    });

    const buildMenu = (menuParentList: any[] = []) => {
      return menuParentList.map((menuItem: any) => {
        if (menuItem.children) {
          const slots = {
            default: () => {
              return buildMenu(menuItem.children); // 默认插槽
            },
            title: () => {
              return (
                <span>
                  <span>{menuItem.meta.title}</span>
                </span>
              ); // 自定义插槽
            },
          };
          return <a-sub-menu key={menuItem.id}>{slots}</a-sub-menu>;
        } else {
          return (
            <a-menu-item key={menuItem.id}>
              <Nuxt-Link class="a-link" to={menuItem.path}>
                {menuItem.meta.title}
              </Nuxt-Link>
            </a-menu-item>
          );
        }
      });
    };

    watch(
      () => router.currentRoute.value.path,
      (path) => {
        const item = flatMenuData.value.find((x) => x.path == path);
        if (!item) return;
        selectedKeys.value = [item.id];
        openKeys.value = item._parentKeys;
      },
      {
        immediate: true,
      }
    );

    const onOpenChange = (keys: any[] = []) => {
      if (!openKeys.value) return;
      const latestOpenKey = keys.find(
        (key) => openKeys.value.indexOf(key) === -1
      );
      const item = flatMenuData.value.find((x) => x.id == latestOpenKey);
      if (!item) return;
      openKeys.value = [...(item._parentKeys || []), item.id];
    };

    return () => (
      <a-menu
        v-model:selectedKeys={selectedKeys.value}
        open-keys={openKeys.value}
        theme="dark"
        mode="inline"
        onOpenChange={onOpenChange}
      >
        {buildMenu(menuInitData.value)}
      </a-menu>
    );
  },
};
</script>
<style lang="less" scoped>
.a-link {
  margin-left: 10px;
}
</style>
